<script setup lang="ts">
import { RouterView } from 'vue-router'
import Snackbar from './components/Snackbar.vue'
import { snackbarState } from './utils/snackbar'
</script>

<template>
  <div class="app-container">
    <RouterView />
    <Snackbar 
      :show="snackbarState.show" 
      :type="snackbarState.type" 
      :message="snackbarState.message" 
    />
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  width: 100%;
  height: 100%;
}

.app-container {
  width: 100%;
  height: 100%;
  background-color: #121212;
  color: white;
  font-family: Arial, sans-serif;
}

/* 适配电视屏幕 */
@media (min-width: 1920px) {
  html {
    font-size: 20px;
  }
}
</style>
